<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="shortcut icon" href="./favicon2.ico" type="image/x-icon" />
    <link rel="icon" sizes="any" mask href="./favicon2.ico">
    <!-- <meta http-equiv="X-Frame-Options" content="allow-from http://www.gzacm.cn/"> -->
    <meta http-equiv="X-Frame-Options" content="sameorigin">
    <title>贵州创米科技有限公司官网</title>
    <style>
        .h1{
            text-align: center;
            border-bottom: 1px #eee solid;
            padding-bottom: 15px;
            position:fixed;
            width: 100%;
            margin-top: -5px;
            padding-top: 20px;
            top: 0;
            z-index: 999;
            background: #FFF;
        }
        .neirong{
            margin-left: 25%;
            padding-top: 100px;
        }
        .con1,.con2{
            float: left;
        }
        .con1{
            width: 700px;
            border-right: 1px #999 solid;
            padding: 20px;
        }
        .con1 img{
            width: 100%;
            border-radius: 5px;
        }
        .con2{
            padding-left: 10px;
            width: 300px;
        }
        .con2 img{
            width: 40%;
            float: left;
            border-radius: 5px;
        }
        .con2 .text{
            float: left; 
            width: 60%;
        }
        .con2 .p{
            margin-bottom: 5px;
            text-indent: 10px;
            display:block;            /*内联对象需加*/
            word-break:keep-all;      /* 不换行 */
            white-space:nowrap;       /* 不换行 */
            overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow:ellipsis;  
        }
        .con2 .item{
            margin-bottom: 20px;
        }
        .con2 .h6{
            margin-bottom: 5px;
            text-indent: 20px;
            color: #000;
            font-size: 14px;
            font-weight: 900;
            display:block;            /*内联对象需加*/
            word-break:keep-all;      /* 不换行 */
            white-space:nowrap;       /* 不换行 */
            overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow:ellipsis;  
        }
        .con2 .time{
            text-indent: 10px;
            font-size: 8px;
            color: #999;
        }
        .line{
            width: 100%;
            clear:both; 
        }
        .top{
            position: fixed;
            right: 0;
            bottom: 0;
            width: 60px;
            border-radius: 50%;
            box-shadow: #000 0 0 10px;
            text-align: center;
        }
        .top a{
            text-decoration: none;
            font-size: 5px;
        }
        .bdsharebuttonbox{
            float: right;
        }
        .remark{
            width: 100%;
            clear: both;
            margin-top: 50px;
        }
    </style>
  </head>
  <body>
        <div id="app">
            <div class="top">
                <a href="#">
                        <p>
                            <img width="15px" src="/miai/img/top.png" alt=""><br/>
                            回到顶部
                        </p>
                </a>
            </div>
            <h1 class="h1">
                <img src="/miai/img/cm_1.png" style="margin-top:0px;height:55px;vertical-align: middle;margin-top:-8px;" />
                &nbsp;&nbsp;贵州米艾科技有限公司宣
            </h1>
            <div class="neirong">
                <div class="con1">
                    <h3>{{tuwen.title}}</h3>
                    <p style="color:#999;">
                        发布时间：{{getTime(tuwen.create_at)}}
                        <div class="bdsharebuttonbox">
                            <a href="#" class="bds_more" data-cmd="more"></a>
                            <a href="#" class="bds_qzone" data-cmd="qzone"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina"></a>
                            <a href="#" class="bds_tqq" data-cmd="tqq"></a>
                            <a href="#" class="bds_renren" data-cmd="renren"></a>
                            <a href="#" class="bds_weixin" data-cmd="weixin"></a>
                        </div>
                        <script>
                            window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
                        </script>
                    </p>
                    <p class="remark">
                        {{tuwen.remark}}
                    </p>
                    <img :src="tuwen.banner" />
                    <p>以下是正文:</p>
                    <div v-html="tuwen.content">
                    </div>
                </div>
                <div class="con2">
                    <div v-for="(n,i) in tuwenList" class="item">
                        <a :href="'/miai/tuwen.html?id='+n._id">
                            <div>
                                <img :src="n.banner" />
                                <div class="text">
                                    <div class="h6">{{n.title}}</div>
                                    <div class="p">{{n.remark}}</div>
                                    <div class="time">{{getTime(n.create_at)}}</div>
                                </div>
                            </div>
                        </a>
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var vm = new Vue({
        el: '#app',
        data:{
            id: '',
            tuwen: {},
            tuwenList: [],
            form:{
                isMe: null,
                deleted: null,
                author: '',
                tab: null,
                page:1,
                size:10
            },

        },
        mounted() {
            var reg = new RegExp("(^|&)id=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            this.id = r[2];
            this.getData();
        },
        methods: {
            getData() {
                let that = this;
                axios.post("/article/getone", {id: this.id})
                    .then(function (response) {
                        that.tuwen = response.data.result
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

                axios.post("/article/gets", this.form)
                    .then(function (response) {
                        that.tuwenList = response.data.result.result
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            getTime(num) {
                let t = new Date(num);
                return (
                    t.getFullYear() + 
                    "年" +
                    (t.getMonth() + 1) + 
                    "月" +
                    t.getDate() + 
                    "日 "+
                    t.getHours() +
                    ":" +
                    t.getMinutes() +
                    ":" +
                    t.getSeconds()
                );
            },
        },
    });
  </script>
</html>
